<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="clue-detail" v-cloak>
        <el-dialog :visible.sync="show" :fullscreen="false" :destroy-on-close="false" width="800px" :title="pageTitle" :close-on-click-modal="false">
            <div class="outer">
                <clue-form @close="() => show = false" @success="updateHandle" :pid="pid" v-if="!!!clue.id" :item="clue" />
                <el-tabs v-else tab-position="left">
                    <el-tab-pane label="线索详情">

                        <el-table :data="threads" highlight-current-row>
                            <el-table-column prop="id" label="ID" />
                            <el-table-column prop="name" label="姓名" />
                            <el-table-column prop="source" label="线索来源" />
                            <el-table-column prop="post_title" label="归属项目" />
                            <el-table-column prop="created_at" label="线索创建时间" />
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane label="客户档案">
                        <customer-detail :userId="clue.id" />
                    </el-tab-pane>

                    <el-tab-pane label="跟进日志">
                        <follows :clue-id="clue.id" @change="$emit('change')" :items="clue.clue_follows" />
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import CustomerDetail from "@/components/CustomerDetail/Index";
import ClueForm from "./ClueForm.vue";
import Follows from "./Follows";
import filters from '@/utils/filters'
import { getCustomerThreadList } from "@/api/thread";

export default {
    components: {
        CustomerDetail,
        Follows,
        ClueForm,
    },
    data () {
        return {
            show: false,
            clue: {},
            followList: [],
            loading: false,
            threads: []
        };
    },

    mounted: function () { },
    props: {
        pid:{ type: Number, default: 0 }
    },

    watch: {
        clue(val){
            if(!val.thread_id){
                this.threads = []
                return
            }
            getCustomerThreadList(val.thread_id).then((resp) => {
                this.threads = resp.data
            })
        },
    },

    computed: {
        brokerId: {
            get () {
                return this.clue.broker_id;
            },
            set (val) {
                // todo
            },
        },
        pageTitle: function () {
            return "";
        },
        clueData: function () {
            // 生成table所需的数据结构
            var data = [];
            var clue = this.clue;
            var t = filters.utcFormater(clue.created_at)
            data = [
                { key: "客户姓名", value: clue.name },
                { key: "客户电话", value: clue.mobile },
                { key: "客户需求", value: clue.content },
                { key: "是否处理", value: clue.is_processed ? '已处理' : '未处理' },
                { key: "状态", value: "status" },
                { key: "顾问", value: "broker" },
                { key: "线索类型", value: clue.source_type || '未知' },
                { key: "来源", value: clue.source_from || '' },
                { key: "创建时间", value: t },
            ];
            return data;
        },
    },

    methods: {
        updateHandle: function () {
            // 线索有更新，刷新列表
            this.show = false
            this.loading = false
            this.$emit('change')
        },
        open: function (clue) {
            this.clue = clue;
            this.show = true;
        },
        close: function () {
            this.clue = {};
            this.show = false;
        },
    },
};
</script>

<style scoped>
.outer {
    min-height: 500px;
}
</style>
